<template>
  <div>
    <div>
      <img src="../static/pexels-cottonbro-studio-4089460.png" alt="" class="banner-image">
    </div>
    <div class="main_padd">
      <div class="recommend-box-title">
        <!-- 标题 -->
        <h2 class="recommend-title-text">配音员推荐</h2>
        <div class="recommend-tab-nav">
          <div class="recommend-tab-item recommend-items-act">热门</div>
          <div class="recommend-tab-item">最新</div>
          <div class="recommend-tab-item">特惠</div>
        </div>
      </div>
      <!-- 配音员列表 -->
      <div class="recommend-box-container row align-items-center justify-content-around no-gutters">
        <div class="recommend-items col-sm-4 col-12">
          <div class="new_width new_boxsize">
            <div class=" row  align-items-start justify-content-between no-gutters">
            <div class="voice-ava col-5">
              <img src="../static/336.jpg" alt="" class="image-ava">
            </div>
            <div class=" col-7">
              <div class="voice-detail">
                <h4 class="voice-title">配音员杰</h4>
              <p class="tags-detail">广告配音 专题配音 动画配音</p>
              <div class="row align-items-center justify-content-start no-gutters">
                <div class="content-items row align-items-center no-gutters">
                  <img src="../static/play-icon.png" alt="" class="play-icon">
                  <div>游戏广告：云客1</div>
                </div>

                <div class="content-items">
                  <img src="../static/play-icon.png" alt="" class="play-icon">
                  <div>游戏广告：云客2</div>
                </div>
              </div>
              </div>

            </div>
          </div>
          </div>


        </div>
        <div class="recommend-items col-sm-4 col-12">
          <div class="new_width new_boxsize">
            <div class=" row  align-items-start justify-content-between no-gutters">
            <div class="voice-ava col-5">
              <img src="../static/336.jpg" alt="" class="image-ava">
            </div>
            <div class=" col-7">
              <div class="voice-detail">
                <h4 class="voice-title">配音员杰</h4>
              <p class="tags-detail">广告配音 专题配音 动画配音</p>
              <div class="row align-items-center justify-content-start no-gutters">
                <div class="content-items row align-items-center no-gutters">
                  <img src="../static/play-icon.png" alt="" class="play-icon">
                  <div>游戏广告：云客1</div>
                </div>

                <div class="content-items">
                  <img src="../static/play-icon.png" alt="" class="play-icon">
                  <div>游戏广告：云客2</div>
                </div>
              </div>
              </div>

            </div>
          </div>
          </div>


        </div>
        <div class="recommend-items col-sm-4 col-12">
          <div class="new_width new_boxsize">
            <div class=" row  align-items-start justify-content-between no-gutters">
            <div class="voice-ava col-5">
              <img src="../static/336.jpg" alt="" class="image-ava">
            </div>
            <div class=" col-7">
              <div class="voice-detail">
                <h4 class="voice-title">配音员杰</h4>
              <p class="tags-detail">广告配音 专题配音 动画配音</p>
              <div class="row align-items-center justify-content-start no-gutters">
                <div class="content-items row align-items-center no-gutters">
                  <img src="../static/play-icon.png" alt="" class="play-icon">
                  <div>游戏广告：云客1</div>
                </div>

                <div class="content-items">
                  <img src="../static/play-icon.png" alt="" class="play-icon">
                  <div>游戏广告：云客2</div>
                </div>
              </div>
              </div>

            </div>
          </div>
          </div>


        </div>





      </div>

    </div>
  </div>
</template>

<script>
  export default {

  }

</script>

<style>
  .recommend-box-title {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 70px 0 30px 0;
  }

  .recommend-title-text {
    font-size: 33px;
    font-weight: 700;
    margin-right: 36px;
  }

  .recommend-tab-nav {
    display: flex;
    align-items: center;

  }

  .recommend-tab-item {
    font-size: 19px;
    color: #666666;
    margin: 0 16px;
  }

  .recommend-items-act {
    font-weight: 700;
    color: #333;
    border-bottom: 2px solid salmon;
  }

  .banner-image {
    width: 100%;
  }

  body {
    background-color: #FAFAFA;
  }

  .recommend-box-container {
    display: flex;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .recommend-items {
    /* margin-right: 25px; */
    margin-bottom: 25px;
    /* height: 200px; */
    /* background: #fff; */
    display: flex;
    justify-content: center;
    border-radius: 14px;
    /* box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.06); */
  }

  .voice-ava {
    width: 100%;
    /* height: 200px; */
    border-radius: 8px;
  }

  .image-ava {
    width: 100%;
    /* height: 200px; */
    border-radius: 8px;
  }

  .voice-detail {
    padding: 0 10px;
  }

  .voice-title {
    font-size: 22px;
  }

  .tags-detail {
    font-size: 14px;
    margin: 20px 0;
    color: #B3B3B3;
  }

  .play-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    vertical-align: middle;
  }

  .content-box {
    width: 100%;
    border-top: 1px dotted #F1F1F1;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 10px 0;
  }

  .content-items {
    display: flex;
    justify-content: center;
  }

</style>
